.resultPage {
    ::v-deep(.van-picker__confirm) {
        color: #FF2D55;
    }

    .resultContainer {
        padding-bottom: 5rem;
        box-sizing: border-box;

        .topData {
            padding: 0rem 16rem 16rem 16rem;
            box-sizing: border-box;
            background-color: white;
        }

        .type {
            display: flex;
            align-items: center;

            .typeData {
                justify-content: space-between;
                margin-top: 16rem;
                display: flex;
                align-items: center;
                border-radius: 8px;
                border: 1px solid #E2E6E8;
                width: 100%;
                padding: 0rem 35rem 0rem 16rem;
                height: 36rem;

                .typeTitle {
                    color: #343C4B;
                    font-family: Inter;
                    font-size: 14rem;
                    font-style: normal;
                    font-weight: 600;
                    line-height: 16rem;
                }

                .typeItem {
                    line-height: 30rem;
                    display: flex;
                    align-items: center;
                    color: #343C4B;
                    font-size: 14rem;
                    position: relative;

                    &::after {
                        position: absolute;
                        content: "";
                        right: -20rem;
                        top: 9rem;
                        background: url("@/assets/images/Me/icon_jiantou.png") no-repeat;
                        width: 12rem;
                        height: 12rem;
                        background-size: cover;
                    }
                }
            }

            img {
                width: 24rem;
                height: 24rem;
            }
        }

        .typeList {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            margin-top: 4rem;
            height: 140rem;
            overflow: hidden;

            .typeItem {
                display: inline-flex;
                padding: 0px 8px;
                justify-content: center;
                align-items: center;
                border-radius: var(--Price, 20px);

                border: 1px solid #E5E7EB;
                color: #666D79;
                height: 24rem;

                text-align: center;
                font-family: Inter;
                font-size: 14px;
                font-style: normal;
                font-weight: 500;
                line-height: 16px;
                margin-right: 8rem;
                margin-top: 8rem;

                &.active {
                    background: #F90;
                    color: white;
                }
            }
        }

        .allTypeHight {
            height: auto;
        }

        .drawDate {
            margin-top: 24rem;
            color: #343C4B;
            font-family: Inter;
            font-size: 16px;
            font-style: normal;
            font-weight: 600;
            line-height: 16px;
        }

        .dateInfo {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 12rem;

            .dateContainer {
                display: flex;
                align-items: center;

                .timeDate {
                    border-radius: 20px;
                    background: #EFEFEF;
                    width: 110rem;
                    height: 24rem;
                    line-height: 24rem;
                    color: #343C4B;
                    text-align: center;
                    font-family: Inter;
                    font-size: 14px;
                    font-style: normal;
                    padding: 0rem 8rem;
                    font-weight: 500;
                    box-sizing: border-box;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    img {
                        width: 12rem;
                        height: 12rem;
                    }
                }

                .line {
                    border-radius: 1px;
                    background: #343C4B;
                    width: 6px;
                    height: 2px;
                    margin: 0rem 8rem;
                }
            }

            .search {
                width: 52rem;
                line-height: 24rem;
                height: 24rem;
                display: inline-flex;
                justify-content: center;
                align-items: center;
                border-radius: 20px;
                background: #FF2D55;
                color: #FFF;
                font-family: Inter;
                font-size: 14px;
                font-style: normal;
                font-weight: 500;
                line-height: 16px;
            }
        }
    }

    .rewardList {
        margin-bottom: 100rem;
        background: #F1F5F9;
        padding: 16rem;
        overflow: scroll;

        .rewardItem {
            min-height: 72rem;
            border-radius: 12px;
            padding: 16rem 5rem 16rem 5rem;
            box-sizing: border-box;
            border-radius: 12px;
            border: 1px solid #FFF;
            background: linear-gradient(268deg, #FFF 0.39%, #FFF 71.26%, #FFF0EF 96.89%);
            box-shadow: 0px 2px 12px 0px rgba(104, 125, 147, 0.12);
            display: flex;
            align-items: center;
            margin-bottom: 12rem;
            justify-content: space-between;
            position: relative;
            z-index: 0;

            .left {
                width: 100%;
                // width: 195rem;
                // position: absolute;
                // z-index: 0;

                .topTitle {
                    color: #343C4B;
                    text-align: left;
                    font-family: Inter;
                    font-size: 14px;
                    font-style: normal;
                    font-weight: 600;
                    line-height: 16px;
                }

                .time {
                    margin-top: 8rem;
                    color: #89899A;
                    font-family: Inter;
                    font-size: 14px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 16px;

                    span {
                        color: #FC3666;
                    }
                }

                .resultNum {
                    margin-top: 10rem;
                    display: flex;
                    align-items: center;
                    font-size: 14rem;

                    .resultLabel {
                        margin-right: 10rem;
                        min-width: 60rem;
                    }

                    .numItem {
                        color: #FFF;
                        margin-left: 5rem;
                        width: 21rem;
                        line-height: 20rem;
                        background-color: #FF2D55;
                        border-radius: 50%;
                        text-align: center;
                    }

                    .numItem3 {
                        display: flex;
                        flex-direction: row;
                        align-items: center;

                        &+.numItem3 {
                            margin-left: 20rem;
                        }

                        img {
                            height: 20rem;
                        }

                        .resItem {
                            margin-left: 4rem;
                            width: 20rem;
                            height: 20rem;
                            border-radius: 4rem;
                            border: 1 solid transparent;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            color: #FFF;
                            font-size: 16rem;
                            font-weight: 700;
                        }
                    }

                    .numItem4 {

                        &+.numItem4 {
                            margin-left: 4rem;
                        }

                        .radius {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            color: #FFF;
                            width: 20rem;
                            height: 20rem;
                            border-radius: 50%;
                            font-size: 14rem;
                        }
                    }

                    .numItem5 {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: space-around;

                        .sixItem {
                            display: flex;
                            flex-direction: column;
                            align-items: center;

                            &>p:first-child {
                                background-color: #FF2D55;
                                width: 20rem;
                                height: 20rem;
                                border-radius: 50%;
                                line-height: 20rem;
                                text-align: center;
                                color: #FFF;
                                font-family: Inter;
                                font-size: 12rem;
                                font-weight: 600;
                                position: relative;
                            }

                            &>p:last-child {
                                margin-top: 4rem;
                                color: #FF6F1E;
                                font-size: 12rem;
                                font-weight: 500;
                                position: relative;
                            }

                            &:last-child>p:first-child::before {
                                content: '+';
                                position: absolute;
                                color: #FF2D55;
                                left: -13rem;
                            }
                        }

                    }
                }
            }

            .rewardImg {
                position: absolute;
                right: 80rem;
                z-index: -1;
                // width: 72px;
                height: 64px;
                // margin: 0rem 20rem 0rem 15rem;
            }

            .arrowRight {
                position: absolute;
                right: 30rem;
                z-index: 0;
            }
        }
    }

    .result2 {
        margin-top: 16rem;
        padding: 0rem 16rem 16rem 16rem;
        background: #F1F5F9;
        box-sizing: border-box;
        margin-bottom: 50rem;
        height: 652px;
        overflow: scroll;
        box-shadow: 0px 2px 12px 0px rgba(104, 125, 147, 0.12);

        .drawDateTime {
            border-radius: 12px;
            border: 1px solid #FFF;
            background: linear-gradient(180deg, #FFE7E4 0%, #FFF 21.13%, #FFF 100%);
            box-shadow: 0px 2px 12px 0px rgba(104, 125, 147, 0.12);
            padding: 16rem;
            box-sizing: border-box;
            margin-top: 20rem;

            .title {
                color: #343C4B;
                text-align: center;
                font-family: Inter;
                font-size: 16px;
                font-style: normal;
                font-weight: 500;
                line-height: 16px;
            }

            .timeBox {
                margin-top: 16rem;
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                grid-gap: 4rem;

                .timeItem {
                    border-radius: 6px;
                    background: #F90;
                    color: #FFF;
                    display: flex;
                    align-items: center;
                    flex-direction: column;
                    justify-content: center;
                    font-family: Inter;
                    font-size: 14px;
                    font-style: normal;
                    font-weight: 500;
                    height: 40rem;
                }
            }
        }
    }
}